<template>
    <div class="x-status">
        <div :style="{ 'background-color': onColor}" v-show="checked">
            <i class="fa fa-check"></i>
            <span>{{ onText }}</span>
        </div>
        <div :style="{ 'background-color': offColor}" v-show="!checked">
            <i class="fa fa-close"></i>
            <span>{{ offText }}</span>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'XStatus',
        props: {
            value: {
                type: [Boolean, String, Number],
                default: false
            },
            width: {
                type: Number,
                default: 0
            },
            onText: {
                type: String,
                default: 'ON'
            },
            offText: {
                type: String,
                default: 'OFF'
            },
            onColor: {
                type: String,
                default: '#19aa8d'
            },
            offColor: {
                type: String,
                default: '#ff0000'
            }
        },
        data() {
            return {
                coreWidth: this.width
            };
        },
        computed: {
            checked() {
                return this.value == 1 ? true : false;
            }
        },
        methods: {},
        created() {
        }
    };
</script>
<style>
    .x-status {
        display: inline-block;
    }

    .x-status > div {
        border-radius: 3px;
        color: #fff;
        text-align: center;
        padding: 2px 8px;
        font-size: 12px;
        line-height: 22px;
    }

</style>
